<template>
	<!-- <hyb-page :title="product.x_name"> -->
	<hyb-page title="服务详情">
		<template v-slot:body>
			<view v-if="$store.state.base.zhu_tu">
				<!-- 轮播图  -->
				<view>
					<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
						:height="g_lbt_cc"></gui-swiper>
				</view>
				<!-- 商品标题 分享按钮 -->
				<view
					class="gui-padding gui-flex gui-row gui-space-between gui-align-items-center gui-bg-white gui-dark-bg-level-3">
					<text class="gui-h5 gui-block product-name gui-block">{{product.x_name}}</text>
					<view class="product-share">
						<button type="defaul" @tap="makePoster"
							class="product-share gui-icons gui-color-orange gui-button gui-noborder">&#xe63d;</button>
					</view>


					<!-- #ifdef MP -->
					<view class="product-share">
						<button type="defaul" open-type="share"
							class="product-share gui-icons gui-color-orange gui-button gui-noborder">&#xe606;</button>
					</view>
					<!-- #endif -->


					<!-- #ifdef H5 -->
					<view class="product-share" v-if="$store.state.jssdk_status">
						<button type="defaul" @tap="share"
							class="product-share gui-icons gui-color-orange gui-button gui-noborder">&#xe606;</button>
					</view>
					<!-- #endif -->




				</view>
				<!-- 价格 -->
				<view class="gui-padding gui-bg-white gui-dark-bg-level-3" style="margin-top:10rpx;">
					<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
						<view>
							<text class="product-price">￥{{product.x_jiage}}{{product.x_danwei}}</text>
							<text class="gui-text gui-color-gray gui-line-through"
								style="margin-left:30rpx;">￥{{product.x_yjiage}}</text>

						</view>

						<text class="gui-text-small gui-color-gray ">已售 {{product.x_xiaoliang}} 件</text>
						<gui-tags v-if="product.x_min_num > 1" :customClass="['gui-bg-red','gui-color-white']"
							:text="product.x_min_num+'单起购'" :borderRadius="50"></gui-tags>
					</view>


					<!-- 	<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-border-b">
						<gui-tags :text="product.x_label" :size="26" :borderRadius="0"></gui-tags>
					</view> -->

					<hyb-yhq v-if="product.x_youhuiquanstatus==1" :y_style="1"></hyb-yhq>

					<navigator v-if="$store.state.base.show_base.fw_dgxz" url="./xuzhi">
						<view class="gui-list-items">
							<view class="gui-list-body gui-border-b" style="margin-left: 0;">
								<view class="gui-list-title">
									<text class="gui-list-title-text gui-primary-text">订购须知</text>
									<text class="gui-list-title-desc gui-color-black">取消、退款、改约等规则</text>
								</view>
							</view>
							<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
						</view>
					</navigator>

					<navigator v-if="!$store.state.base.show_base.fwxq_cfwy"
						:url="'/hyb_o2o/shangjia/info/info?id='+product.x_shangjia">
						<view class="gui-list-items">
							<view class="gui-list-body gui-border-b" style="margin-left: 0;">
								<view class="gui-list-title">
									<text class="gui-list-title-text gui-primary-text">此服务由<text
											class="gui-color-red">{{product.shangjia.s_name}}</text>提供</text>
									<text class="gui-list-title-desc gui-color-gray">好评99.6%</text>
								</view>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
					</navigator>
				</view>
				<!-- 切换导航 -->
				<view class="gui-padding">
					<gui-switch-navigation :items="navItems" :isCenter="true" :size="200" lineHeight="80rpx"
						textAlign="center" activeLineWidth="200rpx" activeLineHeight="2rpx" :margin="10"
						@change="navChange"></gui-switch-navigation>
				</view>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="gui-padding" v-if="active == 0">
				<hyb-rich-text :content="product.x_content"></hyb-rich-text>
			</view>
			<!-- 评论 请复制我们提供的评论布局来实现 -->
			<view class="gui-padding gui-margin-top" v-if="active == 1 && product.pingjias > 0">
				<hyb-comments :list="product.pingjias"></hyb-comments>
			</view>

			<hyb-empty v-if="product.x_content == 0 && active==0"></hyb-empty>
			<hyb-empty v-if="product.pingjias == 0 && active==1"></hyb-empty>

			<!-- 底部 -->
			<view class="product-footer gui-bg-white gui-dark-bg-level-3">

				<!-- 底部按钮栏 -->
				<view class="gui-flex gui-row gui-space-between gui-align-items-center gui-border-t">
					<!-- 2个底部按钮 -->
					<view v-if="$store.state.base.fuwu_xq != 2" class="gui-footer-icon-buttons"
						style="margin-left:30rpx;" hover-class="gui-tap" @tap="goHome">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black">&#xe63b;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">首页</text>
					</view>




					<!-- #ifdef MP -->
					<view style="margin-left:30rpx;" v-if="$store.state.base.kefu_flag==1" @tap="kf">
						<button style="height: auto;" open-type="contact"
							class="gui-footer-icon-buttons gui-button gui-noborder">
							<text
								class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black">&#xe626;</text>
							<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
						</button>
					</view>


					<view v-else class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="kf">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black">&#xe626;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
					</view>
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="kf">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black">&#xe626;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-gray">客服</text>
					</view>
					<!-- #endif -->


					<!-- 2个大按钮 -->
					<view
						class="gui-footer-large-buttons gui-flex1 gui-flex gui-row gui-nowrap gui-justify-content-end">
						<view class="gui-footer-large-button gui-bg-orange"
							style="border-bottom-left-radius:50rpx; width:300rpx; border-top-left-radius:50rpx;"
							hover-class="gui-tap" @tap="to_sj()">
							<text v-if="$store.state.base.fuwu_xq == 1"
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">进入店铺</text>
							<text v-if="$store.state.base.fuwu_xq == 2"
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">进入首页</text>
						</view>
						<view class="gui-footer-large-button gui-bg-red"
							style="width:300rpx;border-bottom-right-radius:50rpx; border-top-right-radius:50rpx;"
							hover-class="gui-tap" @tap="buynow">
							<text
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">立即预约</text>
						</view>
					</view>
				</view>
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
			<!-- 底部占位 -->
			<view style="height:120rpx;"></view>

			<gui-popup v-if="$store.state.base.show_base.fuwu_gui_ge == 1" ref="guipopup" position="bottom">
				<view class="gui-bg-white gui-dark-bg-level-3">
					<view class="gui-padding">
						<text @tap="closePopup" class="gui-icons gui-color-gray"
							style="position: absolute;right:20rpx;top:20rpx;">&#xe610;</text>
						<!-- <view class="gui-card-view gui-bg-white gui-dark-bg-level-3">
							<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
								<image :src="product.x_thumb" class="gui-card-img">
								</image>
								<view class="gui-card-desc" v-if="guige_index>=0">
									<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
										<text class="gui-card-name gui-color-red">￥{{total_money}}</text>
									</view>
									<view class="gui-card-text gui-block gui-secondary-text" style="margin-top:10rpx;">
										已选{{total_count}}件，共计 ￥{{total_money}}元
									</view>
								</view>
							</view>
						</view> -->
						<view>
							<text class="gui-text gui-color-black gui-bold">{{product.x_guigename}}</text>
						</view>
						<scroll-view scroll-y style="max-height: 75vh;">
							<view>
								<view v-for="(guige,index) in product.x_guigecontent" :key="index"
									class="gui-border-b gui-padding-y gui-bg-gray gui-padding gui-margin-top-middle gui-border-radius">

									<view class="gui-text-small gui-color-gray"
										:class="{'gui-color-red':nums[index]>0}">
										{{guige.name}}
									</view>

									<view class="gui-flex gui-space-between  gui-align-items-center">
										<view class="gui-color-red gui-bold">￥{{guige.price}} / {{product.x_danwei}}
										</view>
										<gui-step-box
											:buttonClass="['gui-color-black', 'gui-step-box-button','gui-border']"
											:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-2','gui-border','gui-margin-x']"
											v-model="nums[index]" :index="index" @change="numberChange1">
										</gui-step-box>

									</view>

								</view>
							</view>
						</scroll-view>

						<view class="gui-margin-top  gui-bg-white">
							<view>
								<view class="gui-flex gui-justify-content-center" style="align-items: stretch;">
									<view class="gui-flex1 gui-bg-black gui-color-white gui-padding-small"
										style="border-top-left-radius: 50rpx; border-bottom-left-radius: 50rpx;">
										<view class="gui-text gui-margin-left gui-bold">￥ {{total_money}} 元</view>
										<view class="gui-text-small gui-margin-left" style="font-size: 24rpx;">
											合计数量：{{total_count}}</view>
									</view>
									<view class="gui-flex gui-align-items-center" @tap="pay()"
										style="border-top-right-radius: 50rpx; border-bottom-right-radius: 50rpx;"
										:style="{background:$store.state.base.qjcolor}">
										<text class="gui-color-white gui-button-text gui-padding-x">立即下单</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</gui-popup>


			<gui-popup v-else ref="guipopup" position="bottom">
				<view class="gui-bg-white gui-dark-bg-level-3">
					<view class="gui-padding">
						<view class="gui-card-view gui-bg-white gui-dark-bg-level-3">
							<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
								<image :src="product.x_thumb" class="gui-card-img">
								</image>
								<view class="gui-card-desc" v-if="guige_index>=0">
									<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
										<text
											class="gui-card-name gui-color-red">￥{{parseFloat((userinfo.huiyuan?(product.x_guigecontent[guige_index].vip_price?product.x_guigecontent[guige_index].vip_price:product.x_guigecontent[guige_index].price * userinfo.huiyuan.h_zhekou):product.x_guigecontent[guige_index].price)* num).toFixed(2)}}</text>
									</view>
									<text class="gui-card-text gui-block gui-secondary-text"
										style="margin-top:10rpx;">已选：{{product.x_guigecontent[guige_index].name}}</text>
								</view>
							</view>
						</view>
						<view class="gui-margin-top">
							<text class="gui-text gui-color-black">{{product.x_guigename}}</text>
						</view>
						<view class="gui-margin-top">
							<gui-stags :borderRadius="40" :padding="50"
								:checkedClass="['gui-bg-red', 'gui-dark-bg', 'gui-color-white']" :tags="guiges"
								@change="guiChange"></gui-stags>
						</view>
						<view class="gui-margin-top">
							<text class="gui-text gui-color-black">购买数量</text>
						</view>
						<view class="gui-margin-top">
							<gui-step-box :buttonClass="['gui-color-black', 'gui-step-box-button']"
								:inputClass="['gui-step-box-input','gui-border-radius', 'gui-bg-gray', 'gui-dark-bg-level-2']"
								:value="num" @change="numberChange"></gui-step-box>
						</view>

						<view class="gui-margin-top">
							<button type="default" class="gui-button gui-bg-red gui-noborder" @tap="pay()">
								<text class="gui-color-white gui-button-text">立即预约</text>
							</button>
						</view>

					</view>
				</view>
			</gui-popup>
			<hyb-poster width="400px" height="600px" ref="poster"></hyb-poster>

		</template>
	</hyb-page>

</template>

<script>
	export default {
		data() {
			return {
				total_money: 0,
				total_count: 0,
				g_lbt_cc: 750,
				// 轮播图 
				swiperItems: [],
				// 商品信息
				product: {
					shangjia: {}
				},

				// 切换导航
				navItems: [{
					id: 0,
					name: '服务介绍'
				}, {
					id: 1,
					name: '客户评价'
				}],
				// 切换索引
				active: 0,
				// 属性选择
				attrShow: false,

				guiges: [],
				guige: {},
				guige_index: -1,
				id: 0,
				num: 1,
				fenxiao: null,
				guige_indexs: [],
				nums: []
			}
		},


		// #ifdef MP
		onShareAppMessage() {
			let path = "/hyb_o2o/addpages/pages/detail/detail?id=" + this.product.x_id;
			if (this.fenxiao) {
				path = path + "&f_parentid=" + this.fenxiao.f_id
			}
			return {
				title: this.product.x_name, //分享的标题
				path: path,
				imageUrl: this.product.x_thumb
			};
		},
		//#endif



		computed: {
			userinfo: () => {
				return uni.storage.get("userinfo");
			},
			base: () => {
				return uni.storage.get("base");
			}
		},


		onLoad(options) {

			if (options.g_lbt_cc) {
				this.g_lbt_cc = options.g_lbt_cc;
			}
			this.id = options.id;

			if (options.f_parentid) {
				uni.storage.set("f_parentid", options.f_parentid)
			}

			uni.gPost("fenxiao/user").then((info) => {
				if (info) {
					this.fenxiao = info;
				}
			})

			uni.gPost("fuwu/info", {
				x_id: options.id
			}).then((data) => {
				this.product = data;
				this.num = this.product.x_min_num;
				this.swiperItems.push({
					img: this.product.x_thumb
				})
				if (this.product.x_thumbs) {
					this.product.x_thumbs.forEach((item) => {
						this.swiperItems.push({
							img: item
						})
					})
				}

				let nums = [];
				if (this.product.x_guigecontent.length > 0) {
					this.product.x_guigecontent.forEach((item, index) => {
						this.guiges.push({
							id: index,
							text: item.name,
							checked: index == 0 ? true : false
						})
						nums.push(0);
					})
					this.guige = this.product.x_guigecontent[0];
					this.guige_index = 0;
				}
				this.nums = nums;
			})
		},
		methods: {

			to_sj() {
				if (this.$store.state.base.fuwu_xq == 1) {
					uni.navigateTo({
						url: "/hyb_o2o/shangjia/info/info?id=" + this.product.x_shangjia
					})
				} else {
					uni.redirectTo({
						url: "/hyb_o2o/tablist/index/index?tabbar=1"
					})

				}
			},

			pay() {

				if (this.$store.state.base.show_base.fuwu_gui_ge == 1) {
					let nums = [];
					let guiges = [];
					this.nums.forEach((num, index) => {
						if (num > 0) {
							nums.push(num);
							guiges.push(index);
						}
					})

					if (nums.length == 0) {
						uni.showToast({
							title: '请选择数量!',
							icon: 'none'
						})
					} else {
						let url = '/hyb_o2o/addpages/pages/pay/pay'
						if (this.product.x_pay_page == 1) {
							url = '/hyb_o2o/addpages/pages/pay/pay1'
						}
						uni.navigateTo({
							url: url + "?x_id=" + this.id + "&guiges=" + guiges +
								"&nums=" + nums
						})
					}
				} else {
					let num = parseInt(this.num);
					if (isNaN(num)) {
						uni.showToast({
							title: '购买数量错误!',
							icon: 'none'
						})
					} else if (num < this.product.x_min_num) {
						uni.showToast({
							title: '购买数量最少为' + this.product.x_min_num,
							icon: 'none'
						})
					} else if (num == 0) {
						uni.showToast({
							title: '购买数量最少为1',
							icon: 'none'
						})
					} else {
						let url = '/hyb_o2o/addpages/pages/pay/pay'
						if (this.product.shangjia.depts) {
							url = '/hyb_o2o/addpages/pages/pay/pay1'
						}
						uni.navigateTo({
							url: url + "?x_id=" + this.id + "&guige=" + this.guige_index +
								"&num=" +
								this.num
						})
					}
				}

			},



			makePoster() {
				//通过后台生成
				let param = {
					id: this.id
				};
				// #ifdef MP
				param["from"] = "mp";
				// #endif

				uni.gPost("fuwu/poster", param).then((res) => {
					uni.previewImage({
						urls: [res],
						current: 0
					})
				})
				return;


				let path = "hyb_o2o/addpages/pages/detail/detail?id=" + this.product.x_id;
				if (this.fenxiao) {
					path = path + "&f_parentid=" + this.fenxiao.f_id
				}


				let items = [{
						type: "image",
						url: this.product.x_thumb,
						x: 15,
						y: 15,
						width: 370,
						height: 300,
					},
					{
						type: "text",
						text: this.base.name,
						size: 18,
						x: 15,
						y: 350
					},
					// #ifdef H5
					{
						type: "qrcode",
						text: window.location.href.split("#")[0] + "#/" + path,
						x: 305,
						y: 335,
						width: 80
					},
					// #endif


					// #ifdef MP
					{
						type: "image",
						url: 'https://xjz.cyygkj.cn/api/mp/qrcode?path=' + encodeURIComponent(path) + '&uniacid=' +
							this
							.base.uniacid,
						x: 305,
						y: 335,
						width: 80
					},
					// #endif
					{
						type: "text",
						text: this.product.x_name,
						size: 16,
						color: "gray",
						x: 15,
						y: 380
					},
					{
						type: "text",
						text: "￥" + this.product.x_jiage,
						color: "red",
						size: 18,
						bold: true,
						x: 15,
						y: 410
					},

					{
						type: "image",
						url: this.userinfo.u_thumb,
						x: 15,
						y: 430,
						width: 80,
						height: 80,
						circle: true
					},
					{
						type: "text",
						text: this.userinfo.u_name || this.base.name,
						x: 110,
						size: 18,
						bold: true,
						y: 460
					},

					{
						type: "text",
						text: "好服务持续为您分享...",
						size: 16,
						color: "gray",
						x: 110,
						y: 495
					},
					{
						type: "text",
						text: this.base.name,
						color: "orange",
						align: "center",
						size: 18,
						x: 200,
						y: 550
					},
					{
						type: "text",
						text: "—— " + this.product.shangjia.s_name + " ——",
						color: "gray",
						size: 16,
						align: "center",
						x: 200,
						y: 580
					}
				]


				this.$refs.poster.make(items).then((src) => {
					uni.previewImage({
						urls: [src]
					})
				})
			},


			downloadFile(url) {
				return "https://xjz.cyygkj.cn/api/file/download?url=" + encodeURIComponent(url);
			},

			// 分享
			share: function() {
				let path = "/hyb_o2o/addpages/pages/detail/detail?id=" + this.product.x_id;
				if (this.fenxiao) {
					path = path + "&f_parentid=" + this.fenxiao.f_id
				}
				//公众号分享
				let url = window.location.href.split("#")[0] + "#" + path
				uni.$jswx.wxShare({
					title: this.base.name,
					url: url,
					content: this.product.x_name,
					image: this.product.x_thumb
				}).then((flag) => {
					if (flag) {
						uni.showToast({
							title: "请点击右上角分享!",
							icon: "none"
						})
					}
				})

			},
			closePopup() {
				this.$refs.guipopup.close();
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 返回首页
			goHome: function() {
				uni.gJs.navigate("/hyb_o2o/tablist/index/index?tabbar=1");
			},
			// 返回首页
			kf: function() {
				if (!this.$store.state.base.kefu_lx) {
					uni.navigateTo({
						url: "/hyb_o2o/kefunew/user_list?tag=yh"
					})
					// console.log(this.product.shangjia.s_telphone)
					// uni.makePhoneCall({
					// 	phoneNumber: this.product.shangjia.s_telphone
					// })
				} else {
					
					uni.navigateTo({
						url: "/hyb_o2o/kefunew/user_list?tag=yh"
					})
					// uni.navigateTo({
                    // 	url: "/hyb_o2o/kefunew/user_list?tag=yh"
					// })
				}

			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.selectAttr();
			},
			// 购买 
			buynow: function() {
				// 选择属性
				this.$refs.guipopup.open();
			},
			// 属性选择
			selectAttr: function() {
				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存
				if (this.attrRes.guige == null) {
					uni.showToast({
						icon: "none",
						title: "请选择属性"
					});
				}
				console.log('请完善提交代码');
			},

			guiChange: function(e) {
				console.log(e)
				if (e != -1) {
					// this.guiges[this.guige_index]["checked"] = false;
					this.guige_index = e.id;
				} else {
					this.guiges[this.guige_index]["checked"] = true;
				}
			},
			numberChange: function(e) {
				this.num = e[0];
			},
			numberChange1: function(e) {
				this.nums[e[1]] = e[0];

				let count = 0;
				let money = 0;
				// 会员折扣健壮性保护
				const zhekou = (this.userinfo && this.userinfo.huiyuan_xq && this.userinfo.huiyuan_xq.h_zhekou) ? this.userinfo.huiyuan_xq.h_zhekou : 1;
				const isVip = this.userinfo && this.userinfo.huiyuan;

				this.product.x_guigecontent.forEach((guige, index) => {
					if (this.nums[index] == undefined) this.nums[index] = 0
					count += this.nums[index];
					if (isVip) {
						if (guige.vip_price > 0) {
							money += this.nums[index] * guige.vip_price;
						} else {
							money += this.nums[index] * guige.price * zhekou;
						}
					} else {
						money += this.nums[index] * guige.price;
					}
				})
				this.total_count = parseFloat(count).toFixed(0);
				this.total_money = money;
			},
			closeAttr: function() {
				this.attrShow = false;
			}
		}
	}
</script>

<style>
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	.gui-padding {
		padding: 20rpx 25rpx;
	}

	.gui-footer-icon-buttons {
		width: 100rpx;
	}

	.gui-card-view {
		padding: 25rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 140rpx;
		height: 140rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}
</style>